<template>
	<view class="process">
		<s-navBack title="单位验收过程" @goBack="goBack"></s-navBack>
		<u-row gutter="50">
			<u-col span="12">
				<view class="tips">
					<span>{{ infoList.name }}</span>&nbsp;-&nbsp;{{ infoList.title }}
				</view>
			</u-col>
			<u-col span="12">
				<u-form v-model="process">
					<view class="content text">
						<h3>验收过程</h3>
						<view class="lineImg">
							<image src="../static/images/line.png" mode=""></image>
						</view>
						<u-form-item >
							<u-input type="textarea" v-model="process.processRemark" placeholder="过程说明选填" placeholderStyle="color: #D9D9D9" :border="false" :height="100" :auto-height="true" />
						</u-form-item>
			      <view class="u-demo">
							<view class="u-demo-wrap">
								<view class="u-demo-area">
									<view class="pre-box" v-if="!showUploadList">
										<view class="pre-item" v-for="(item, index) in lists" :key="index">
											<image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
											<view class="u-delete-icon" @tap.stop="deleteItem(index)">
												<u-icon name="close" size="20" color="#ffffff"></u-icon>
											</view>
										</view>
									</view>
									<u-upload ref="uUpload" :max-size="2 * 1024 * 1024"
									  :custom-btn="customBtn"
									  :show-upload-list="showUploadList" :action="action"
										:file-list="fileList1"
										:header="header" :form-data="formData"
										 @on-success="onSuccess1"  @on-remove="onRemove1">
										<view v-if="customBtn" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
											<u-icon name="photo" size="60"></u-icon>
										</view>
									</u-upload>
								</view>
							</view>
						</view>
					</view>
					
					<view class="content text">
						<h3>验收结论</h3>
						<view class="lineImg">
							<image src="../static/images/line.png" mode=""></image>
						</view>
						<u-form-item >
							<u-input type="textarea" v-model="process.conclusionRemark" placeholder="结论说明选填" placeholderStyle="color: #D9D9D9" :border="false" :height="100" :auto-height="true" />
						</u-form-item>
					  <view class="u-demo">
							<view class="u-demo-wrap">
								<view class="u-demo-area">
									<view class="pre-box" v-if="!showUploadList">
										<view class="pre-item" v-for="(item, index) in lists" :key="index">
											<image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
											<view class="u-delete-icon" @tap.stop="deleteItem(index)">
												<u-icon name="close" size="20" color="#ffffff"></u-icon>
											</view>
										</view>
									</view>
									<u-upload ref="uUpload" ::max-size="2 * 1024 * 1024"
									  :custom-btn="customBtn"
									  :show-upload-list="showUploadList" :action="action"
										:file-list="fileList2"
										:header="header" :form-data="formData" 
										@on-success="onSuccess2"  @on-remove="onRemove2">
										<view v-if="customBtn" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
											<u-icon name="photo" size="60"></u-icon>
										</view>
									</u-upload>
								</view>
							</view>
						</view>
					</view>
			
					<view class="content">
						<u-form-item label="参验人姓名" label-width="160" >
							<u-input input-align="right"  v-model="process.acceptanceUsers[0].acceptanceUsername" class="u-form-right" placeholder="请输入参验人姓名" placeholderStyle="color: #D9D9D9" />
						</u-form-item>
						<u-form-item label="手机号" label-width="140">
							<u-input input-align="right" v-model="process.acceptanceUsers[0].acceptancePhone" maxlength="11" placeholder="请输入手机号" placeholderStyle="color: #D9D9D9"/>
						</u-form-item>
						<u-form-item label="身份证号" label-width="140">
							<u-input input-align="right"  v-model="process.acceptanceUsers[0].acceptanceIdcard" maxlength="18" class="u-form-right" placeholder="请输入身份证号" placeholderStyle="color: #D9D9D9"/>
						</u-form-item>
						<view class="autograph" @click="doss">
							<view v-if="process.acceptanceUsers[0].acceptanceAutograph == ''">
								<view v-if="!imgAutograph">点击签名</view>
								<view class="imgs" v-else>
								  <image class="img" :src="process.acceptanceUsers[0].acceptanceAutograph" mode="widthFix"></image>
								</view>
							</view>
							<view class="imgs" v-else>
							  <image class="img" :src="process.acceptanceUsers[0].acceptanceAutograph" mode="widthFix"></image>
							</view>
						</view>
						<view class="mePhoto">个人照片</view>
						<view class="u-demo">
							<view class="u-demo-wrap">
								<view class="u-demo-area">
									<view class="pre-box" v-if="!showUploadList">
										<view class="pre-item" v-for="(item, index) in lists" :key="index">
											<image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
											<view class="u-delete-icon" @tap.stop="deleteItem(index)">
												<u-icon name="close" size="20" color="#ffffff"></u-icon>
											</view>
										</view>
									</view>
									<u-upload ref="uUpload" :max-size="2 * 1024 * 1024"
									  :custom-btn="customBtn" :file-list="fileList3"
									  :show-upload-list="showUploadList" :action="action"
										:header="header" :form-data="formData" 
										@on-success="onSuccess3"  @on-remove="onRemove3">
										<view v-if="customBtn" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
											<u-icon name="photo" size="60"></u-icon>
										</view>
									</u-upload>
								</view>
							</view>
						</view>
					</view>
				</u-form>	
			</u-col>
			<view class="butList">
				<u-col span="6" class="btn1">
					<u-button shape="circle" plain @click="saveTemporary">临时保存</u-button>
				</u-col>
				<u-col span="6" class="but2">
					<u-button class="but" type="primary" @click="buildProject" shape="circle">提交</u-button>
				</u-col>
			</view>
		</u-row>
		<!-- 提示框 -->
		<u-toast ref="uToast"></u-toast>
		<!-- 模态框 -->
		<u-modal v-model="showModel.state" :content="showModel.content" show-cancel-button="true" confirm-color="#FFFFFF" @confirm="confirmClick" @cancel="cancelClick"></u-modal>
	  <!-- 模态框提示框 -->
	  <u-modal v-model="showModel1" cancel-text="不保存" confirm-text="保存" :show-title="false" :content="contentModel" show-cancel-button="true" confirm-color="#FFFFFF" @confirm="confirmClick1" @cancel="cancelClick1"></u-modal>
	  <u-modal v-model="showModel2" :show-title="false" :content="contentModel" show-cancel-button="true" confirm-color="#FFFFFF" @confirm="confirmClick2" @cancel="cancelClick2"></u-modal>
		<!-- 个人签名 -->
		<catSignature canvasId="canvas"  @close="close" @save="save" :visible="isShow" />
	</view>
</template>

<script>
	import catSignature from "@/components/cat-signature/cat-signature.vue"
	export default {
		name: 'acceptanceProcess',
		components:{catSignature},
		data() {
			return {
				showModel1: false, // 弹窗状态
				showModel2: false, // 弹窗状态
				contentModel: '', // 弹出框内容
				// 签名
				imgAutograph:'',
				isShow: false,
				// 弹出框
				showModel: {
					state: false,
					content: '',
					indx: ''
				},
				process: {// 页面数据
					acceptanceTypeId: '', // 验收分类ID
					acceptanceUsers:[
						{
							acceptanceAutograph: '',	// 参验人签名照片		
							acceptanceIdcard: '',	// 参验人身份证号码		
							acceptancePhone: '',	// 参验人手机号码		
							acceptanceUsername: '',	// 参验人姓名			
							userImages: [] // 参验人照片
					  }
					],
					companyName: '',	// 单位名称
					conclusionImages: [],	// 验收结论图片		
					conclusionRemark: '',	// 验收结论说明		
					id:'',	// 工程验收ID		
					processImages: [],	// 验收过程图片		
					processRemark: '',	// 验收过程说明		
					projectCompanyId: ''	// 工程单位ID
				},			
				token: '',
				tenantId: '',
				// 图片上传
				action: 'https://project-supervision-api.sdhuan.cn/blade-resource/oss/endpoint/put-file', // 服务器上传地址
				fileList1: [], // 默认显示的图片列表，数组元素为对象，必须提供url属性
				fileList2: [], // 默认显示的图片列表，数组元素为对象，必须提供url属性
				fileList3: [], // 默认显示的图片列表，数组元素为对象，必须提供url属性
				showUploadList: true, // 是否显示组件内部的图片预览
				header: {},
				formData: {
					file: 'multipart/form-data',
				},
				autoUpload: true, // 选择完图片是否自动上传
				deletable: true,
				lists: [],
				infoList: {}, // 上个页面传的数据
				backTrue: false, // 返回状态值
				saveTrue: false, // 临时保存状态
				dataLength: '' // 数据长度
			}
		},
		onLoad(e) {
			this.infoList = JSON.parse(e.info)
			console.log(this.infoList)
			this.token = uni.getStorageSync("token") || ''
			this.tenantId = uni.getStorageSync("tenantId") || ''
			this.header = {
				"Blade-Auth": this.token,
				"Tenant-Id": this.tenantId,
				"Content-Type":"multipart/form-data",
			}
			this.process.acceptanceTypeId = this.infoList.acceptanceTypeId
			this.process.projectCompanyId = this.infoList.projectCompanyId
			this.process.companyName = this.infoList.title
			this.getArceptanceInfo() // 获取验收草稿信息
		  setTimeout(() => {
		  	// console.log('初始长度',JSON.stringify(this.process).length)
		  	let yy = JSON.stringify(this.process).length
		  	this.dataLength = yy
		  }, 300)
		},
		methods: {
			// 返回上一级
			goBack() {				
				this.backTrue = true
				if(JSON.stringify(this.process).length == this.dataLength && this.saveTrue == false){
					 this.$navJump.navigateBack()
					} else if(JSON.stringify(this.process).length != this.dataLength && this.saveTrue == false){
						this.showModel1 = true
						this.contentModel = '是否保存本次修改内容?'
					} else if(JSON.stringify(this.process).length != this.dataLength && this.saveTrue == true){
						this.$navJump.navigateBack()
					} else {
						this.$navJump.navigateBack()
				}
			},
			// 获取草稿的内容
			getArceptanceInfo() {
				let header = {
					"content-type":"application/json;charset=UTF-8"
				}
				let dataList = {
					acceptanceTypeId: this.process.acceptanceTypeId,
					projectCompanyId: this.process.projectCompanyId
				}
				this.$ajax.post({
					url: `/project-info/${this.infoList.projectId}/acceptanceDraftDetail`,
					data: JSON.stringify(dataList),
					header: header
				}).then(res => {
					// console.log(res)
					if(res.data != null) {
						this.process = res.data
						if(this.process.processImages != undefined) {
							this.fileList1 = this.process.processImages.map(item => ({
							    url: item
							}));
						}
						if(this.process.conclusionImages != undefined) {
							this.fileList2 = this.process.conclusionImages.map(item => ({
									url: item
							}));
						}
						if(this.process.acceptanceUsers[0].userImages != undefined) {
							this.fileList3 = this.process.acceptanceUsers[0].userImages.map(item => ({
							    url: item
							}));
						}
					}
				})
			},
			
			// 临时保存
			saveTemporary(){
				if(this.process.conclusionRemark || this.process.conclusionImages.length || this.process.processRemark || this.process.processImages.length ||  this.process.acceptanceUsers[0].acceptanceUsername || this.process.acceptanceUsers[0].acceptanceIdcard || this.process.acceptanceUsers[0].acceptancePhone) {
          // this.showModel1 = true
          // this.contentModel = '是否保存已填写内容?'
					this.confirmClick1()
				} else {
					this.$refs.uToast.show({
						title: '请填写信息后在进行保存！',
						type: 'warning'
					})
				}
			},
			// 选择临时保存取消按钮
			cancelClick1() {
				this.showModel1 = false
				if(this.backTrue == true) {
					this.$navJump.navigateBack()
				}
			},
			// 选择临时保存确定按钮
			confirmClick1(){
				this.saveTrue = true
				let header = {
					"content-type":"application/json;charset=UTF-8"
				}
				let dataList = {
					acceptanceTypeId: this.infoList.acceptanceTypeId, // 验收分类ID
					acceptanceUsers: this.process.acceptanceUsers, // 验收人信息
					companyName: this.process.companyName,	// 单位名称
					conclusionImages: this.process.conclusionImages,	// 验收结论图片		
					conclusionRemark: this.process.conclusionRemark,	// 验收结论说明		
					id: this.process.id,	// 工程验收ID		
					processImages: this.process.processImages,	// 验收过程图片		
					processRemark: this.process.processRemark,	// 验收过程说明		
					projectCompanyId: this.infoList.projectCompanyId	// 工程单位ID
				}
				this.$ajax.post({
					url: `/project-info/${this.infoList.projectId}/acceptance/save`,
					data: JSON.stringify(dataList),
					header: header
				}).then(res => {
					// console.log(res)
					if(res.code == 200) {
						this.showModel1 = false
						this.$refs.uToast.show({
							title: '内容保存成功！',
							type: 'success'
						})
						setTimeout(() => {
							let that = this
							if(that.backTrue == true) {
								that.$navJump.navigateBack()
							}
						}, 1200)
					}
				}) 
			},
			
			// 上传图片，删除图片操作
			deleteItem(index) {
				this.showModel.content = '是否删除该图片？'
				this.showModel.state = true
				this.showModel.indx = index
			},
				// 上传图片返回数据1
			onSuccess1(data, index, lists) {
				// console.log('onSuccess1', data, index, lists);
				// console.log(data.data.link)
				this.process.processImages.push(data.data.link)
			},
			onRemove1(data, index, lists) {
				// console.log('onRemove1', data, index, lists);
				this.process.processImages.splice(data, 1)
			},
			
			// 上传图片返回数据2
			onSuccess2(data, index, lists) {
				// console.log('onSuccess2', data, index, lists);
				// console.log(data.data.link)
				this.process.conclusionImages.push(data.data.link)
			},
			onRemove2(data, index, lists) {
				// console.log('onRemove2', data, index, lists);
				this.process.conclusionImages.splice(data, 1)
			},
			
			// 上传图片返回数据3
			onSuccess3(data, index, lists) {
				// console.log('onSuccess3', data, index, lists);
				// console.log(data.data.link)
				this.process.acceptanceUsers[0].userImages.push(data.data.link)
			},
			onRemove3(data, index, lists) {
				// console.log('onRemove3', data, index, lists);
				this.process.acceptanceUsers[0].userImages.splice(data, 1)
			},
			
			// 弹出框确认
			confirmClick() {
				this.$refs.uUpload.remove(this.showModel.indx);
			},
			// 弹出框取消
			cancelClick() {
				this.showModel.state = false
			},
			// 点击签名
			doss(){
				this.isShow = true;
			},
			close(){
				this.isShow = false;
			},
			save(val){
				console.log(val)
				this.isShow = false;
				this.imgAutograph = val
				uni.uploadFile({
					url: 'https://project-supervision-api.sdhuan.cn/blade-resource/oss/endpoint/put-file', //仅为示例，非真实的接口地址
					filePath: val,
					name: 'file',
					formData: {
						file: 'multipart/form-data'
					},
					header: this.header,
					success: (res) => {
						console.log(JSON.parse(res.data));
						let data = JSON.parse(res.data)
						if(data.code == 200) {
							this.process.acceptanceUsers[0].acceptanceAutograph = data.data.link
						}
					}
				})
			},
			
			// 提价验收
			buildProject() {
				if(this.process.acceptanceUsers[0].acceptanceUsername || this.process.acceptanceUsers[0].acceptanceIdcard || this.process.acceptanceUsers[0].acceptancePhone) {
					this.showModel2 = true
					this.contentModel = '验收信息提交后不可再修改与查看，请确认是否上传？'
				} else {
					this.$refs.uToast.show({
						title: '请填写参验人的信息！',
						type: 'warning'
					})
				}
			},
			// 提交验收取消按钮
			cancelClick2() {
				this.showModel2 = false
			},
			// 提交验收确定按钮
			confirmClick2(){
				let header = {
					"content-type":"application/json;charset=UTF-8"
				}
				let dataList = {
					acceptanceTypeId: this.infoList.acceptanceTypeId, // 验收分类ID
					acceptanceUsers: this.process.acceptanceUsers, // 验收人信息
					companyName: this.process.companyName,	// 单位名称
					conclusionImages: this.process.conclusionImages,	// 验收结论图片		
					conclusionRemark: this.process.conclusionRemark,	// 验收结论说明		
					id: this.process.id,	// 工程验收ID		
					processImages: this.process.processImages,	// 验收过程图片		
					processRemark: this.process.processRemark,	// 验收过程说明		
					projectCompanyId: this.infoList.projectCompanyId	// 工程单位ID
				}
				this.$ajax.post({
					url: `/project-info/${this.infoList.projectId}/acceptance/submit`,
					data: JSON.stringify(dataList),
					header: header
				}).then(res => {
					// console.log(res)
					if(res.code == 200) {
						this.$navJump.reLaunch('./processSuccess?info=' + JSON.stringify(this.infoList))
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.process {
		margin-top: -40rpx;
		.tips {
			margin-bottom: 25rpx;
			background-color: #FFFFFF;
			font-size: 30rpx;
			padding: 30rpx 20rpx;
			border-radius: 10rpx;
			span {
				color: #3B85FE;
			}
		}
		.content {
			background: #FFFFFF;
			padding: 0 30rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			h3 {
				color: #262626;
				font-size: 30rpx;
				font-weight: 600;
				padding-top: 20rpx;
			}
			.lineImg {
				margin-top: -30rpx;
				image {
					width: 120rpx;
					height: 9.5rpx;
				}
			}
		}
		.autograph {
			width: 100%;
			border: 2rpx solid #D9D9D9;
			font-size: 24rpx;
			color: #D9D9D9;
			border-radius: 8rpx;
			padding: 20rpx 30rpx;
			.imgs{
				width: 200rpx;
				height: 100rpx;
				display: flex;
				margin: 0 auto;
				flex-wrap: wrap;
				.img{
					 width: 100%;
					 height: 100%;
				}
			}
		}
		.mePhoto {
			margin: 40rpx 0 25rpx;
		}	
	}
	.text {
		/deep/.u-border-bottom:after {
			border-bottom-width: 0!important
		}
		
	}
  .butList {
			margin: 20rpx 0 40rpx;
			.btn1 {
				/deep/.u-btn--default {
					border-color: #3B85FE!important;
					color: #3B85FE!important;
					margin: 50rpx 0 80rpx;
				}
			
			}
			.but2 {
				/deep/.u-btn--primary{
					background:linear-gradient(to right ,#3B85FE, #3BC0FE)!important;
					margin: 50rpx 0 80rpx;
				}
			}
		}
		
		
		
// 上传照片css
		.u-demo {
			padding-bottom: 30rpx;
		}
		/deep/.u-list-item {
			margin: 8rpx!important;
		}
		.u-demo-wrap {
			background-color: #FFFFFF;
			padding: -10rpx 8rpx 20rpx;
			margin-left: -14rpx;
			margin-right: -14rpx;
		}
		
		.u-add-wrap {
			flex-direction: column;
			color: $u-content-color;
			font-size: 28rpx;
		}
		
		/deep/ .slot-btn {
			width: 329rpx;
			height: 140rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgb(244, 245, 246);
			border-radius: 10rpx;
		}
		 
		.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}
		 
		.pre-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		 
		.pre-item {
			flex: 0 0 48.5%;
			border-radius: 10rpx;
			height: 140rpx;
			overflow: hidden;
			position: relative;
			margin-bottom: 20rpx;
		}
		 
		.u-progress {
			position: absolute;
			bottom: 10rpx;
			left: 8rpx;
			right: 8rpx;
			z-index: 9;
			width: auto;
		}
		 
		.pre-item-image {
			width: 100%;
			height: 140rpx;
		}
		 
		.u-delete-icon {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			z-index: 10;
			background-color: $u-type-error;
			border-radius: 100rpx;
			width: 44rpx;
			height: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.tips {
			margin-top: 155rpx;
		}
		
		/* X、XS机型的媒体查询 */
		@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
			.tips {
				margin-top: 185rpx;
			}
		}
		/* XS MAX机型媒体查询 */
		@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3){
			.tips {
				margin-top: 185rpx;
			}
		}
		/* XR机型媒体查询 */
		@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2){
			.tips {
				margin-top: 185rpx;
			}
		}
</style>
